<template>
	<h2>父组件</h2>
	<h3>具名插槽</h3>
	<SubSlot>
		<template v-slot:header>
			<p>这是头部区域</p>
		</template>
		<template #content>
			<p>这是内容区域</p>
		</template>
		<template #footer>
			<p>这是尾部区域</p>
		</template>
	</SubSlot>
	
	<h3>作用域插槽</h3>
	<SubSlot>
		<template v-slot:header='scope'>
			<p>{{scope}}</p>
			<p>{{scope.msg}}</p>
			<p>{{scope.txt}}</p>
		</template>
		<template #content='{user}'>
			<p>使用解构赋值方式接受来自子组件的插槽数据</p>
			<p>{{user.name}}</p>
			<p>{{user.age}}</p>
			<p>{{user.gender}}</p>
		</template>
		<template #footer>
			<!-- 自行完成接受list的数据 -->
		</template>
	</SubSlot>
</template>

<script setup>
	import SubSlot from './SubSlot.vue';
</script>

<style scoped>
</style>